<template>
  <div class="view-container">
    <!-- head return-->
    <van-nav-bar title="查看订单" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="black" @click="$router.push({ name: 'goods' })" />
      </template>
    </van-nav-bar>

    <!-- 列表及金额显示模块 -->
    <div class="order-content">
      <div class="address-module">
        <div class="address-box">
          <div class="address-select" @click="selectAddress">
            <span>选择收货地址</span>
            <van-icon name="arrow" />
          </div>
          <div class="address-value">
            <div class="address-text">
              <span>{{ address.address }}</span>
            </div>
            <div class="contact-text">
              <span>{{ address.name }}</span>
              <span>{{ address.tel }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list-module">
        <div class="shops-box">
          <img class="shops-logo" :src="shopsItem.picture_url" alt="Logo" />
          <span class="shops-name">{{ shopsItem.name }}</span>
        </div>
        <div class="goods-list">
          <div class="goods-card" v-for="(item, index) in shoppingCart" :key="index">
            <van-card
              :num="item.amount"
              :tag="item.discount_amount > 0 ? '折扣' : ''"
              :price="item.discount_amount > 0 ? (item.price - item.discount_amount) * item.amount + '.00' : item.price * item.amount + '.00'"
              :desc="String(item.discount_amount > 0 ? item.price * item.amount : '')"
              :title="item.name"
              currency="$"
              :thumb="item.image_thumbnail_cdn ? item.image_thumbnail_cdn : localImg"
            >
              <template #tags>
                <van-button type="primary" size="mini" v-show="item.type === 5" @click="showComboDetail(index)">套餐详情<van-icon :name="showCombo === index ? 'arrow-down' : 'arrow-up'" /></van-button>
              </template>
            </van-card>
            <div class="combo-box" v-if="showCombo === index && item.type === 5">
              <div v-for="(combo, i) in item.combo.combos" :key="i">
                <span class="combo-title">{{ combo.name }}</span>
                <div>
                  <span class="combo-name">{{ combo.items.item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="charges-list">
          <div class="amount-type_1">
            <span>优惠券</span>
            <span>无</span>
          </div>
          <div class="amount-type_1">
            <span>折扣</span>
            <span>-${{ collectSum.discount }}</span>
          </div>
          <div class="amount-type">
            <span>税</span>
            <span>${{ collectSum.tax }}</span>
          </div>
          <div class="amount-type" v-if="radio == 1">
            <span>服务费</span>
            <span>${{ collectSum.service }}</span>
          </div>
          <div class="amount-type" v-if="radio == 3">
            <span>配送费</span>
            <span>$9</span>
          </div>
        </div>
      </div>
      <div class="takeFood-module">
        <div class="takeFood-select">
          <div>取餐方式</div>
          <div>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">堂食</van-radio>
              <van-radio name="2">自提</van-radio>
              <van-radio name="3">外卖</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="remarks-module">
        <div class="remarks-box" @click="editRemark">
          <div>偏好及口味的备注</div>
          <div>
            <div class="remarks-value">{{ remark }}</div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>

    <!-- 提交订单按钮模块 -->
    <div class="submit-module">
      <div class="submit-box">
        <div class="final-sum">
          <span class="discountSum" v-show="collectSum.discount > 0 || collectSum.coupon > 0">共优惠 ${{ collectSum.discount + collectSum.coupon }}</span>
          <span class="finalSum">${{ collectSum.totalAmount }}</span>
        </div>
        <div class="submit-button" @click="submitOrder">
          <span>提交订单</span>
        </div>
      </div>
    </div>

    <!-- 备注弹出模块 -->
    <van-popup v-model="showRemark" round position="bottom" @close="message = ''" :style="{ height: '30%' }">
      <div class="remarks-input-box">
        <div class="remarks-input-head">
          <span>偏好及口味的备注</span>
          <span @click=";(showRemark = !showRemark), (remark = message)">完成</span>
        </div>
        <van-field v-model="message" rows="3" autosize type="textarea" maxlength="60" placeholder="请输入备注" show-word-limit />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      showRemark: false,
      showCombo: -1,
      radio: '3',
      takeFoodType: ['堂食', '自提', '外卖'],
      remark: '',
      message: '',
      localImg: 'static/img/mxbc/Ice_Cream/Purple_Potato_Latte.jpeg'
    }
  },
  created() {
    this.initUserInfo()
    var data = this.submitOrderData
    if (data.remark) return (this.remark = data.remark)
  },
  computed: {
    ...mapState({
      initShoppingCart: state => state.home.initShoppingCart,
      shoppingCart: state => state.home.shoppingCart,
      shopsConfig: state => state.home.shopsConfig,
      shopsItem: state => state.home.shopsItem,
      address: state => state.account.address,
      submitOrderData: state => state.account.submitOrderData
    }),
    // 计算所有类型金额
    collectSum() {
      var config = this.shopsConfig
      var cart = this.shoppingCart
      var obj = {
        coupon: 0,
        discount: 0,
        service: 0,
        tax: 0,
        totalAmount: 0
      }
      cart.forEach(item => {
        if (item.discount_amount === 0) {
          obj.totalAmount += item.price * item.amount
        } else {
          obj.discount = item.discount_amount * item.amount
          obj.totalAmount += (item.price - item.discount_amount) * item.amount
        }
      })
      if (config.service_charge) {
        obj.service = Math.round(obj.totalAmount * config.service_charge_rate * 0.01 * 100) / 100
      }
      if (config.tax) {
        obj.tax = Math.round(obj.totalAmount * config.tax_rate * 0.01 * 100) / 100
        obj.totalAmount += obj.tax
      }
      switch (this.radio) {
        case '1':
          obj.totalAmount = Math.round((obj.totalAmount + obj.service) * 100) / 100
          break
        case '2':
          break
        case '3':
          obj.totalAmount = Math.round((obj.totalAmount + 9) * 100) / 100
          break
      }
      return obj
    }
  },
  methods: {
    // 请求最新用户数据、用户资产数据
    initUserInfo() {
      this.$load.start()
      this.$store.dispatch('getUserinfo').then(msg => {
        if (msg) return this.$msg.danger(msg + 'info_err_1')
        this.$store.dispatch('getUserAssets').then(msg => {
          if (msg) return this.$msg.danger(msg + 'assets_err_2')
          this.$load.done()
        })
      })
    },
    // 选择地址
    selectAddress() {
      this.$router.push({ name: 'addlist', query: { source: 1 } })
    },
    // 编辑备注
    editRemark() {
      this.showRemark = !this.showRemark
      if (this.remark !== '') return (this.message = this.remark)
    },
    // 却提交订单数据
    submitOrder() {
      var data = {
        collectSum: this.collectSum,
        orderList: this.initShoppingCart,
        remark: this.remark,
        orderType: this.takeFoodType[this.radio - 1]
      }
      this.$store.commit('submitOrder', data)
      this.$router.push({ name: 'payments' })
    },
    showComboDetail(index) {
      if (this.showCombo === index) return (this.showCombo = -1)
      this.showCombo = index
    }
  }
}
</script>

<style lang="less" scoped>
.view-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.order-content {
  position: absolute;
  width: 97%;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  .address-module {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 90px;
    border-radius: 9px;
    margin-bottom: 0.5em;
    background: white;
    .address-box {
      width: 90%;
      .address-select {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50%;
        border-bottom: 0.1em solid #f2f2f2;
        font-size: 1.1em;
        color: #ffbf05;
        span:nth-child(1) {
          margin-right: 0.3em;
        }
      }
      .address-value {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 50%;
        .address-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 90%;
          font-size: 0.9em;
          color: #454545;
        }
        .contact-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 90%;
          font-size: 0.9em;
          color: #999999;
          span:nth-child(1) {
            margin-right: 0.6em;
          }
        }
      }
    }
  }
  .list-module {
    overflow: hidden;
    width: 100%;
    border-radius: 9px;
    margin-bottom: 0.5em;
    background: white;
    .shops-box {
      display: flex;
      align-items: center;
      height: 45px;
      padding-left: 1.2em;
      .shops-logo {
        width: 30px;
        height: 30px;
        margin-right: 0.6em;
        border-radius: 6px;
      }
      .shops-name {
        font-size: 0.9em;
      }
    }
    .goods-list {
      width: 100%;
      border-bottom: 0.1em solid #f2f2f2;
      /deep/.van-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 70px;
        background: white;
      }
      /deep/.van-card__header {
        height: 70px;
      }
      .combo-box {
        padding-left: 70px;
        width: 100%;
        .combo-title {
          color: #ffbf05;
          font-size: 0.8em;
          font-weight: 500;
        }
        .combo-name {
          color: #999999;
          font-size: 0.66em;
          // font-weight: 500;
        }
      }
      /deep/.van-card__thumb {
        width: 50px;
        height: 50px;
      }
      /deep/.van-tag--mark {
        background: #ff362e;
      }
      /deep/.van-card__content {
        min-height: 50px;
        height: 50px;
        .van-card__num {
          position: absolute;
          bottom: 0;
          font-size: 1.2em;
        }
        .van-card__price {
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: 1.1em;
          color: red;
          font-weight: 400;
          .van-card__price-integer {
            font-size: 1.1em;
          }
          .van-card__price-currency {
            font-size: 1.1em;
          }
        }
        .van-card__desc {
          position: absolute;
          right: 0;
          color: #b8b8b8;
          text-decoration: line-through;
        }
        .van-button--primary {
          position: absolute;
          height: 36%;
          bottom: 0;
          left: 1.2em;
          border: none;
          color: #b8b8b8;
          font-size: 1.1em;
          background-color: white;
        }
      }
      /deep/.van-image {
        overflow: hidden;
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
      .van-tag--mark {
        transform: translate(-10%, -20%) scale(0.8);
      }
    }
    .charges-list {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      .amount-type,
      .amount-type_1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        height: 36px;
        color: #6b6b6b;
      }
      .amount-type {
        span:nth-child(2) {
          font-size: 0.9em;
          color: #b8b8b8;
        }
      }
      .amount-type_1 {
        span:nth-child(2) {
          color: red;
          font-size: 0.9em;
        }
      }
    }
  }
  .takeFood-module {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 45px;
    border-radius: 9px;
    background: white;
    margin-bottom: 0.5em;
    /deep/ .van-radio__icon--checked .van-icon {
      background-color: #ffbf05;
      border-color: #ffbf05;
    }
    .takeFood-select {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      font-size: 0.9em;
      color: #6b6b6b;
    }
  }
  .remarks-module {
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 9px;
    margin-bottom: 90px;
    background: white;
    .remarks-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      height: 100%;
      color: #6b6b6b;
      div:nth-child(1) {
        width: 50%;
        font-size: 0.9em;
      }
      div:nth-child(2) {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 50%;
        .remarks-value {
          overflow: hidden;
          width: 80%;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 0.9em;
          color: #c9c9c9;
          text-align: right;
        }
      }
    }
  }
}
/deep/.van-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  .remarks-input-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    height: 40px;
    font-size: 0.9em;
    span:nth-child(1) {
      color: #808080;
    }
    span:nth-child(2) {
      color: #ffbf05;
    }
  }
  .remarks-input-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
}
/deep/.van-cell {
  width: 90%;
  padding: 0;
  border-radius: 9px;
  margin-top: 0.6em;
  padding: 0.3em;
  background: #f5f5f5;
  .van-field__word-limit {
    color: #a6a6a6;
  }
}
.submit-module {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  max-width: 640px;
  width: 100%;
  height: 60px;
  bottom: 0;
  .submit-box {
    overflow: hidden;
    position: absolute;
    display: flex;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: #fafafa;
    .final-sum {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 60%;
      height: 100%;
      .discountSum {
        font-size: 0.6em;
        color: #e3020d;
        font-weight: bolder;
        margin-left: 15px;
      }
      .finalSum {
        font-size: 1.2em;
        margin-left: 15px;
        color: #666666;
      }
    }
    .submit-button {
      width: 40%;
      height: 100%;
      text-align: center;
      line-height: 50px;
      background-color: #ffbf05;
      color: white;
      font-size: 1.2em;
    }
  }
}
</style>
